<template>
  <!-- 顾客详情页 -->
  <div>
    <!-- 头部部分 -->
    <div class="header">
      <div class="left">
        <div class="box" >
          <el-image
            style="width: 80px; height: 80px"
            :src="this.detailForm.userFace"
            :preview-src-list="[this.detailForm.userFace]"
          >
          </el-image>
        </div>
        <!-- 作用域插槽 -->
      </div>
      <div class="right">
        <el-button
          style="color: green; border: none; background-color: #ffffff"
          @click="addCustome"
          type="primary"
          >修改头像</el-button
        >
      </div>
    </div>
    <el-divider></el-divider>
    <!-- 内容部分 -->
    <div class="content">
      <template> </template>
      <el-form style="font-size: 10px" ref="custome_form" label-width="80px">
        <!-- 登录用户 -->
        <el-form-item label="登录用户" prop="username">
          {{ detailForm.id }}
        </el-form-item>
        <!-- 用户姓名 -->
        <el-form-item label="用户姓名" prop="realname">
          {{ detailForm.username }}
        </el-form-item>
        <!--用户手机  -->
        <el-form-item label="用户手机" prop="telephone">
          {{ detailForm.telephone }}
        </el-form-item>

        <!-- 用户性别 -->
        <el-form-item
          v-if="detailForm.gender == 'male'"
          label="用户性别"
          prop="gender"
        >
          {{ male }}
        </el-form-item>
        <el-form-item v-else label="用户性别" prop="gender">
          {{ female }}
        </el-form-item>
        <!-- 用户角色 -->
        <el-form-item v-if="!detailForm.roles" label="用户角色" prop="roles">
          ---
        </el-form-item>
        <el-form-item v-else label="用户角色" prop="roles">
          {{ detailForm.roles[0].name }}
        </el-form-item>
        <!-- 用户生日 -->
        <el-form-item v-if="!detailForm.birth" label="用户生日" prop="birth">
          <span>{{
            new Date(parseInt(detailForm.birth))
              .toLocaleString()
              .replace(/:\d{1,2}$/, " ")
          }}</span>
        </el-form-item>
        <el-form-item v-else label="用户生日" prop="birth">
          {{ notice }}
        </el-form-item>
        <!-- 注册时间 -->
        <el-form-item label="注册时间" prop="birth">
          <!-- {{ DetailData.registerTime }} -->
          <span>{{
            new Date(parseInt(detailForm.registerTime))
              .toLocaleString()
              .replace(/:\d{1,2}$/, " ")
          }}</span>
        </el-form-item>

        <!-- 邮箱 -->
        <el-form-item v-if="!detailForm.email" label="邮箱" prop="username">
          {{ notice }}
        </el-form-item>
        <el-form-item v-else label="邮箱" prop="username">
          {{ detailForm.email }}
        </el-form-item>
        <!-- 用户状态 -->
        <el-form-item label="用户状态" prop="username">
          <el-tag v-if="detailForm.status == '正常'" type="success">{{
            detailForm.status
          }}</el-tag>
          <el-tag v-else type="danger">{{ detailForm.status }}</el-tag>
        </el-form-item>
      </el-form>
    </div>
    <el-divider></el-divider>
    <!-- 底部部分 -->
    <div class="foot">
      <el-button
        style="color: green; border: none; background-color: #ffffff"
        @click="editCustome"
        type="primary"
        >修改个人信息</el-button
      >
    </div>

    <!-- 修改头像模态框 -->
    <el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible">
      <el-form :model="detailForm" ref="detail_form">
        <el-form-item label="头像">
          <el-upload
            class="avatar-uploader"
            :action="uploadFileURL"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <img v-if="imageUrl" :src="detailForm.userFace" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm(detailForm)"
          >确 定</el-button
        >
      </div>
    </el-dialog>

    <!-- 修改个人信息模态框 -->
    <el-dialog
      :title="dialogEditTitle"
      :visible.sync="dialogVisible"
      @close="dialogClose"
    >
      <!-- 表单区域 -->
      <!-- :model 表单对象 最终我们要提交的那个表单对象 -->
      <!-- :rules 表单验证规则 -->
      <!-- ref 类比与 id 最终通过ref找到这张表单 -->
      <el-form
        :model="queryCustome"
        :rules="rules"
        ref="edit_form"
        label-width="80px"
      >
        <!-- 用户名 -->
        <el-form-item label="用户名" prop="username">
          <el-input :disabled="true" v-model="queryCustome.username"></el-input>
        </el-form-item>
        <!-- 姓名 -->
        <el-form-item label="姓名" prop="realname">
          <el-input v-model="queryCustome.realname"></el-input>
        </el-form-item>
        <!-- 性别 -->
        <el-form-item label="性别" prop="gender">
          <el-radio v-model="queryCustome.gender" label="male">男</el-radio>
          <el-radio v-model="queryCustome.gender" label="female">女</el-radio>
        </el-form-item>
        <!--手机号  -->
        <el-form-item label="手机号" prop="telephone">
          <el-input v-model.number="queryCustome.telephone"></el-input>
        </el-form-item>
        <!--邮箱  -->
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="queryCustome.email"></el-input>
        </el-form-item>
        <!--生日  -->
        <el-form-item label="生日" prop="birth">
          <el-date-picker
            v-model="queryCustome.birth"
            align="right"
            type="date"
            placeholder="选择日期"
            :picker-options="pickerOptions"
            value-format="timestamp"
          >
          </el-date-picker>
        </el-form-item>
      </el-form>
      <!-- 底部操作区域 -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogClose">取 消</el-button>
        <!-- 提交表单后调用重置表单的方法 -->
        <el-button type="primary" @click="submitForm(queryCustome)"
          >修 改</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { get, post } from "@/utils/request";
import { showFileURL, uploadFileURL } from "../../../utils/config";

export default {
  data() {
    return {
      male: "男 ♂",
      female: "女 ♀",
      notice: "暂无",
      // 上传文件的服务器地址
      uploadFileURL,
      showFileURL,
      // 控制模态框的隐藏与显示
      dialogFormVisible: false,
      dialogVisible: false,
      // 模态框标题
      dialogTitle: "",
      dialogEditTitle: "",
      detailId: "",
      // 定义一个查询参数
      queryCustome: {},
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            },
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            },
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            },
          },
        ],
      },
      value1: "",
      value2: "",
      DetailData: [],
      url: "",
      srcList: "",
      // 表单对象
      detailForm: {},
      // 表单验证规则
      rules: {
        // 用户名
        id: [{ required: true, message: "请输入用户名", trigger: "blur" }],
        // 姓名
        username: [{ required: true, message: "请输入姓名", trigger: "blur" }],
        // 手机号
        telephone: [
          { required: true, message: "请输入手机号", trigger: "blur" },
          // { type: "number", message: "手机号必须是数字" },
        ],
        // 密码
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
      },

      imageUrl: "",
    };
  },
  computed: {},
  methods: {
    async getCustomeDetail() {
      let data = {
        id: this.$route.query.detailId,
      };
      // console.log(res);
      let res = await get("/baseUser/findUserDetailsById", data);

      // this.DetailData = res.data;
      this.detailForm = res.data;
      // this.queryCustome = res.data
      // this.url = this.DetailData.userFace
      // console.log(res);
    },
    addCustome() {
      // console.log(res);
      // this.detailForm = { ...row };
      // 预览图片 地址赋值
      this.dialogTitle = "修改头像";
      // 模态框显示
      this.dialogFormVisible = true;
    },
    editCustome() {
      this.queryCustome = { ...this.detailForm };
      this.dialogEditTitle = "修改个人信息";
      this.dialogVisible = true;
    },
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
      // 上传成功后 更新imgUrl预览图片路径
      this.detailForm.userFace = showFileURL + res.data.id;
      // this.detailForm.photo = showFileURL + res.data.id;
      // console.log(this.imageUrl);
    },
    beforeAvatarUpload(file) {
      const isLt3M = file.size / 1024 / 1024 < 10;
      if (!isLt3M) {
        this.$message.error("上传头像图片大小不能超过 3MB!");
      }
    },
    async submitForm(row) {
      // console.log({ ...data, ...this.detailForm });
      // 发送表单验证的请求 提交表单对象
      let res = await post("/baseUser/saveOrUpdate", row);
      console.log(res);
      // // 给用户一个成功的提示
      // this.$message({
      //   message: "提交成功",
      //   type: "success",
      // });
      // 刷新页面
      this.getCustomeDetail();
      // 调用关闭模态框的方法
      if (row == this.queryCustome) {
        this.dialogClose();
        console.log("bb");
      } else {
        this.dialogEditClose();
        console.log("123");
      }
    },

    // 关闭模态框  调用表单重置方法
    dialogClose() {
      this.dialogVisible = false;
    },
    dialogEditClose() {
      //   // 重置表单
      //   this.$refs["edit_form"].resetFields();
      //   // 关闭模态框
      //   setTimeout(() => {
      //     this.dialogVisible = false;
      //   }, 200);
      this.dialogFormVisible = false;
    },
  },
  created() {
    this.getCustomeDetail();
  },
  mounted() {},
};
</script>
<style lang="scss" scoped>
.header {
  margin-top: 20px;
  height: 50px;
}
.left {
  float: left;
  margin-left: 100px;
  .box {
    margin-top: -15px;
      width: 80px;
      height: 80px;
      border-radius: 50%;
      overflow: hidden;
    }
    img {
      width: 100%;
      height: 100%;
      transform: translate(-50%,-50%);
      position: relative;
      top: 50%;
      left: 50%;
    }
}
.right {
  float: right;
  margin-right: 100px;
}
</style>